<div class="response">
    <div class="response-description" *ngIf="!isRef()">
        <div class="form-label">Description</div>
        <div class="problem-flex">
            <validation-problem [model]="response" property="description"></validation-problem>
            <div class="grow">
                <inline-markdown-editor [value]="response.description" noValueMessage="No description."
                                        [baseNode]="response" nodePath="description"
                                        (onChange)="setDescription($event)"></inline-markdown-editor>
            </div>
        </div>
    </div>
    <div class="response-content" *ngIf="!isRef()">
        <div class="form-label">Response Body</div>
        <content [parent]="response"></content>
    </div>

    <div class="response-ref" *ngIf="isRef()">
        <div class="form-label">Response Definition</div>
        <validation-problem [model]="response" property="$ref"></validation-problem>
        <span>This response references the </span>
        <em><a (click)="navigateToDefinition()">{{ definitionName() }}</a></em>
        <span> Response Definition.</span>
    </div>
</div>
